import CodeView from '../../../shared/components/CodeView';
import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import { getDisplayElementById } from '../../shared/helpers';
import Blockquote from '../../../shared/components/Blockquote';
import * as Textareas from './base/example';

<div className="doc lead">
  Textarea inputs are used for freeform data entry.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(Textareas.states, "required")}
</CodeView>

## About Textarea

You can style the HTML `<textarea>` element to align with the Salesforce brand by using the class `.slds-textarea` on the `<textarea>` element.

### Accessibility

All form elements marked as required with an * must have an accompanying legend.

Example:
<RequiredLabelExample/>

## Base

<CodeView>
  {getDisplayElementById(Textareas.default)}
</CodeView>

## States

### Disabled

<CodeView>
  {getDisplayElementById(Textareas.states, "disabled")}
</CodeView>

### Required

<CodeView>
  {getDisplayElementById(Textareas.states, "required")}
</CodeView>

### Error

<CodeView>
  {getDisplayElementById(Textareas.states, "error")}
</CodeView>

### Read only

<CodeView>
  {getDisplayElementById(Textareas.states, "read-only")}
</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="textarea" type="component" />
